<script>
import { defineComponent, getCurrentInstance, ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { useCounterStore } from "../stores";

export default defineComponent({
  setup(props, context) {
    const store = useCounterStore();
    const router = useRouter();
    const route = useRoute();
    const drawer = ref(false);
    const nickName = ref("");
    const userName = ref("");
    const email = ref("");
    const captcha = ref("");
    const password1 = ref("");
    const password2 = ref("");
    const title = ref("");
    const title2 = ref("");
    const pswdFlag = ref(false);
    const cptcFlag = ref(false);
    const drawer2 = ref(false);
    const { proxy } = getCurrentInstance();
    // 检查重置密码：两次密码输入是否一致以及是否为空、是否超过6位
    function checkPassword() {
      if (password1.value != "" || password2.value != "") {
        if (password1.value.length >= 6) {
          if (password1.value == password2.value) {
            pswdFlag.value = true;
            ElMessage({
              showClose: true,
              message: "两次密码输入格式正确 ^.^",
              type: "success"
            });
          } else {
            ElMessage({
              showClose: true,
              message: "两次密码不一致，请再次输入 X.X",
              type: "error"
            });
            pswdFlag.value = false;
          }
        } else {
          ElMessage({
            showClose: true,
            message: "密码长度不能小于6位 X.X",
            type: "error"
          });
          pswdFlag.value = false;
        }
      } else {
        ElMessage({
          showClose: true,
          message: "密码不能为空 X.X",
          type: "error"
        });
        pswdFlag.value = false;
      }
    }
    // 检查注册：密码是否为空以及是否超过6位
    function checkPassword2() {
      if (password1.value != "") {
        if (password1.value.length >= 6) {
          ElMessage({
            showClose: true,
            message: "密码输入格式正确 ^.^",
            type: "success"
          });
          pswdFlag.value = true;
        } else {
          ElMessage({
            showClose: true,
            message: "密码长度不能小于6位 X.X",
            type: "error"
          });
          pswdFlag.value = false;
        }
      } else {
        ElMessage({
          showClose: true,
          message: "密码不能为空 X.X",
          type: "error"
        });
        pswdFlag.value = false;
      }
    }
    // 控制注册界面是否弹出
    function cancelClick() {
      drawer.value = false;
    }
    // 将注册信息存入
    function confirmClick() {
      ElMessageBox.confirm(`Are you sure the information is correct ?`)
        .then(() => {
          if (pswdFlag && cptcFlag) {
            proxy.$http
              .post("/system/user", {
                nickName: nickName.value,
                userName: userName.value,
                email: email.value,
                password: password1.value
              })
              .then(res => {
                ElMessage({
                  showClose: true,
                  message: "注册成功,可以登录啦 ^.^",
                  type: "success"
                });
              })
              .catch(err => {
                ElMessage({
                  showClose: true,
                  message: "注册失败,请联系客服 X.X",
                  type: "error"
                });
              });
          }
          drawer.value = false;
        })
        .catch(() => {
          // catch error
        });
    }
    // 控制重置密码界面是否弹出
    function cancelClick2() {
      drawer.value = false;
    }
    // 将重置密码信息存入
    function confirmClick2() {
      ElMessageBox.confirm(`Are you sure you reset to this password ?`)
        .then(() => {
          if (pswdFlag && cptcFlag) {
            proxy.$http.get(`/system/user/get/${userName.value}`).then(res => {
              proxy.$http
                .post("/system/user/reset", {
                  // 'userId':res.data[0].userId,
                  userName: userName.value,
                  // 'email':email.value,
                  password: password2.value
                })
                .then(res => {
                  ElMessage({
                    showClose: true,
                    message: "密码重置成功,可以登录啦 ^.^",
                    type: "success"
                  });
                })
                .catch(err => {
                  ElMessage({
                    showClose: true,
                    message: "密码重置失败,请联系客服 X.X",
                    type: "error"
                  });
                });
            });
          }
          drawer2.value = false;
        })
        .catch(() => {});
    }
    // 发送验证码请求
    function sendMsg() {
      console.log(email.value);
      proxy.$http
        .post(`/system/user/sendMsg/${email.value}`)
        .then(res => {
          ElMessage({
            showClose: true,
            message: res.msg,
            type: "success"
          });
        })
        .catch(err => {
          ElMessage({
            showClose: true,
            message: "未提供邮箱,验证码发送失败 X.X",
            type: "error"
          });
        });
    }
    // 验证码验证请求
    function checkCaptcha() {
      var map =
        '{"email":"' + email.value + '","code":"' + captcha.value + '"}';
      proxy
        .$http({
          method: "POST",
          headers: { "content-type": "application/json;charset=UTF-8" },
          data: map,
          url: `/system/user/send`
        })
        .then(res => {
          if (res.code == 200) {
            cptcFlag.value = true;
          } else {
            cptcFlag.value = false;
          }
          if (res.code == 200) {
            ElMessage({
              showClose: true,
              message: "验证码正确 ^.^",
              type: "success"
            });
          } else {
            ElMessage({
              showClose: true,
              message: "验证码错误 X.X",
              type: "error"
            });
          }
        });
    }
    // 登录校验
    const login = () => {
      proxy.$http
        .post(`/login?userName=${userName.value}&password=${password1.value}`)
        .then(res => {
          if (password1.value != "") {
            console.log(res);
            if (res.code == 200) {
              ElMessage({
                showClose: true,
                message: "欢迎登陆科加斯任务管理系统 ^.^",
                type: "success"
              });
              let flag = false;
              proxy.$http
                .get(`/system/user/get/${userName.value}`)
                .then(res => {
                  store.setUserId(res.data[0].userId);
                  proxy.$http
                    .get(`/system/user/${res.data[0].userId}`)
                    .then(res => {
                      console.log(res);
                      for (var i = 0; i < res.roleIds.length; i++) {
                        console.log(res.roleIds[i]);
                        if (res.roleIds[i] == 2 || res.roleIds[i] == 1) {
                          flag = true;
                        } else {
                          flag = false;
                        }
                      }
                      store.setFlag(flag);
                    });
                });
              store.setToken(res.token);
              store.setUserName(userName.value);
              router.push("/home");
            } else {
              ElMessage({
                showClose: true,
                message: "用户名或密码错误 X.X",
                type: "error"
              });
            }
          } else {
            ElMessage({
              showClose: true,
              message: "密码不能为空 X.X",
              type: "error"
            });
          }
        });
    };
    return {
      proxy,
      nickName,
      userName,
      captcha,
      email,
      password1,
      password2,
      drawer,
      drawer2,
      pswdFlag,
      cptcFlag,
      cancelClick,
      cancelClick2,
      confirmClick,
      confirmClick2,
      checkPassword,
      checkPassword2,
      sendMsg,
      checkCaptcha,
      login
    };
  }
});
</script>

<template>
  <div class="body">
    <div class="container">
      <div class="drop">
        <div class="content">
          <h2>Sign In</h2>
          <div class="form">
            <div class="inputBox">
              <input class="input" type="text" placeholder="UserName" v-model="userName" />
            </div>
            <div class="inputBox">
              <input class="input" type="password" placeholder="Password" v-model="password1" />
            </div>
            <div class="inputBox">
              <button class="input" @click="login()">Login</button>
            </div>
          </div>
        </div>
      </div>
      <button class="btns" @click="drawer2 = true">Forget Passwrod</button>
      <button class="btns signup" @click="drawer = true">Sign Up</button>
    </div>
    <div class="square">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="circle">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div>
      <el-drawer
        v-model="drawer"
        direction="btt"
        size="90%"
        style="background: linear-gradient(200deg,#86adf4,#f1bdff);"
      >
        <template #header>
          <h2>注册登记</h2>
        </template>
        <template #default>
          <div class="content2">
            <span class="input input--kaede">
              <input
                class="input__field input__field--kaede"
                type="text"
                id="input-34"
                v-model="nickName"
              />
              <label class="input__label input__label--kaede" for="input-34">
                <span class="input__label-content input__label-content--kaede">昵称</span>
              </label>
            </span>
            <span class="input input--kaede">
              <input
                class="input__field input__field--kaede"
                type="text"
                id="input-35"
                v-model="userName"
              />
              <label class="input__label input__label--kaede" for="input-35">
                <span class="input__label-content input__label-content--kaede">用户名</span>
              </label>
            </span>
            <span class="input input--kaede">
              <input
                class="input__field input__field--kaede"
                type="text"
                id="input-36"
                v-model="email"
              />
              <label class="input__label input__label--kaede" for="input-36">
                <span class="input__label-content input__label-content--kaede">邮箱</span>
              </label>
            </span>
            <el-button type="primary" plain @click="sendMsg()" style="margin-top: -30px;">发送验证码</el-button>
            <span class="input input--kaede">
              <input
                class="input__field input__field--kaede"
                type="text"
                id="input-38"
                v-model="password1"
                @blur="checkPassword2()"
              />
              <label class="input__label input__label--kaede" for="input-38">
                <span class="input__label-content input__label-content--kaede">密码</span>
              </label>
            </span>
            <span class="input input--kaede">
              <input
                class="input__field input__field--kaede"
                type="text"
                id="input-39"
                v-model="captcha"
                @blur="checkCaptcha()"
              />
              <label class="input__label input__label--kaede" for="input-39">
                <span class="input__label-content input__label-content--kaede">验证码</span>
              </label>
            </span>
          </div>
        </template>
        <template #footer>
          <div style="flex: auto">
            <el-button @click="cancelClick">取消</el-button>
            <el-button type="primary" @click="confirmClick">确定</el-button>
          </div>
        </template>
      </el-drawer>
    </div>
    <div>
      <el-drawer
        v-model="drawer2"
        direction="btt"
        size="90%"
        style="background: linear-gradient(200deg,#f1bdff,#86adf4);"
      >
        <template #header>
          <h2>重置密码</h2>
        </template>
        <template #default>
          <div class="content2">
            <span class="input input--kaede">
              <input
                class="input__field input__field--kaede"
                type="text"
                id="input-35"
                v-model="userName"
              />
              <label class="input__label input__label--kaede" for="input-35">
                <span class="input__label-content input__label-content--kaede">用户名</span>
              </label>
            </span>
            <span class="input input--kaede">
              <input
                class="input__field input__field--kaede"
                type="text"
                id="input-36"
                v-model="email"
              />
              <label class="input__label input__label--kaede" for="input-36">
                <span class="input__label-content input__label-content--kaede">邮箱</span>
              </label>
            </span>
            <el-button type="primary" plain style="margin-top: -30px;" @click="sendMsg()">发送验证码</el-button>
            <span class="input input--kaede">
              <input
                class="input__field input__field--kaede"
                type="text"
                id="input-37"
                v-model="password1"
              />
              <label class="input__label input__label--kaede" for="input-37">
                <span class="input__label-content input__label-content--kaede">新密码</span>
              </label>
            </span>
            <span class="input input--kaede">
              <input
                class="input__field input__field--kaede"
                type="text"
                id="input-38"
                v-model="password2"
                @blur="checkPassword()"
              />
              <label class="input__label input__label--kaede" for="input-38">
                <span class="input__label-content input__label-content--kaede">确认新密码</span>
              </label>
            </span>
            <span class="input input--kaede">
              <input
                class="input__field input__field--kaede"
                type="text"
                id="input-39"
                v-model="captcha"
                @blur="checkCaptcha()"
              />
              <label class="input__label input__label--kaede" for="input-39">
                <span class="input__label-content input__label-content--kaede">验证码</span>
              </label>
            </span>
          </div>
        </template>
        <template #footer>
          <div style="flex: auto">
            <el-button @click="cancelClick2">取消</el-button>
            <el-button type="primary" @click="confirmClick2">确定</el-button>
          </div>
        </template>
      </el-drawer>
    </div>
  </div>
</template>

<style scoped>
.body {
  margin: -8px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(200deg, #e3c5eb, #a9c1ed);
}
h1 {
  margin-top: -630px;
  margin-right: -300px;
  top: 10px;
  color: #fff;
  border-radius: 30px;
  width: 300px;
  height: 50px;
  text-align: center;
  background: linear-gradient(200deg, #a9c1ed, #e3c5eb);
}
h1:hover {
  background: linear-gradient(200deg, #e3c5eb, #a9c1ed);
}
.container {
  position: relative;
  left: -80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .drop {
  position: relative;
  width: 350px;
  height: 350px;
  box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
    25px 35px 20px rgba(0, 0, 0, 0.05), 25px 35px 20px rgba(0, 0, 0, 0.05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
  transition: 0.5s;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 57% 43% 35% 65% / 46% 41% 59% 54%;
}
.container .drop:hover {
  border-radius: 50%;
}
.container .drop::before {
  content: "";
  position: absolute;
  width: 35px;
  top: 50px;
  left: 85px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}
.container .drop::after {
  content: "";
  position: absolute;
  width: 15px;
  top: 90px;
  left: 115px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.9;
}
.container .drop .content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding: 40px;
  gap: 15px;
}
.content2 {
  font-size: 130%;
  padding-top: -2px;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.container .drop .content h2 {
  position: relative;
  color: #333;
  font-size: 1.5em;
}
.container .drop .content .form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center;
}
.container .drop .content .form .inputBox {
  position: relative;
  width: 225px;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    inset -2px -5px 10px rgba(255, 255, 255, 1),
    15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
  border-radius: 25px;
}
.container .drop .content .form .inputBox::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}
.container .drop .content .form .inputBox .input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 1em;
  padding: 10px 15px;
}
.container .drop .content .form .inputBox button {
  color: #fff;
  text-transform: uppercase;
  font-size: 1em;
  cursor: pointer;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.container .drop .content .form .inputBox:last-child {
  width: 120px;
  background: #ff0f5b;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
    15px 15px 10px rgba(0, 0, 0, 0.05), 15px 10px 15px rgba(0, 0, 0, 0.025);
  transition: 0.5s;
}
.container .drop .content .form .inputBox:last-child:hover {
  width: 150px;
}
.btns {
  position: absolute;
  right: -120px;
  bottom: 0;
  width: 120px;
  height: 120px;
  background: #c61dff;
  display: flex;
  border: 1px solid transparent;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  color: #fff;
  line-height: 1.2em;
  letter-spacing: 0.1em;
  transition: 0.25s;
  text-align: center;
  box-shadow: inset 10px 10px 10px rgba(190, 1, 254, 0.05),
    15px 25px 10px rgba(190, 1, 254, 0.1), 15px 20px 20px rgba(190, 1, 254, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
  border-radius: 37% 63% 30% 70% / 51% 19% 81% 49%;
}
.btns:hover {
  border-radius: 50%;
}
.btns::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 30px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.45;
}
.btns.signup {
  bottom: 150px;
  right: -120px;
  width: 80px;
  height: 80px;
  border-radius: 59% 41% 72% 28% / 39% 43% 57% 61%;
  background: #01b4ff;
  box-shadow: inset 10px 10px 10px rgba(1, 180, 255, 0.05),
    15px 25px 10px rgba(1, 180, 255, 0.1), 15px 20px 20px rgba(1, 180, 255, 0.1),
    inset -10px -10px 15px rgba(255, 255, 255, 0.5);
}
.btns.signup::before {
  left: 20px;
  width: 15px;
  height: 15px;
}
.btns:hover {
  border-radius: 50%;
}

ul li {
  position: absolute;
  border: 1px solid #fff;
  width: 30px;
  height: 30px;
  list-style: none;
  opacity: 0;
}
.square li {
  top: 20vh;
  left: 60vw;
  animation: square 10s linear infinite;
}
.square li:nth-child(2) {
  top: 80vh;
  left: 10vw;
  animation-delay: 2s;
}
.square li:nth-child(3) {
  top: 60vh;
  left: 85vw;
  animation-delay: 4s;
}
.square li:nth-child(4) {
  top: 80vh;
  left: 50vw;
  animation-delay: 6s;
}
.square li:nth-child(5) {
  top: 10vh;
  left: 70vw;
  animation-delay: 8s;
}
.square li:nth-child(6) {
  top: 10vh;
  left: 10vw;
  animation-delay: 10s;
}
.circle li {
  bottom: 0;
  left: 15vw;
  animation: circle 10s linear infinite;
}
.circle li:nth-child(2) {
  left: 35vw;
  animation-delay: 2s;
}
.circle li:nth-child(3) {
  left: 55vw;
  animation-delay: 4s;
}
.circle li:nth-child(4) {
  left: 75vw;
  animation-delay: 6s;
}
.circle li:nth-child(5) {
  left: 90vw;
  animation-delay: 8s;
}
.circle li:nth-child(6) {
  left: 35vw;
  animation-delay: 10s;
}
@keyframes square {
  0% {
    transform: scale(0) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(5) rotateY(1000deg);
    opacity: 0;
  }
}
@keyframes circle {
  0% {
    transform: scale(0) rotateY(0deg);
    opacity: 1;
    bottom: 0;
    border-radius: 0;
  }
  100% {
    transform: scale(5) rotateY(1000deg);
    opacity: 0;
    bottom: 90vh;
    border-radius: 50%;
  }
}

.input {
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: 400px;
  width: calc(100% - 2em);
  vertical-align: top;
}
.input__field {
  position: relative;
  display: block;
  float: right;
  padding: 0.8em;
  width: 60%;
  border: none;
  border-radius: 0;
  background: #f0f0f0;
  color: #aaa;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-appearance: none; /* for box shadows to show on iOS */
}
.input__field:focus {
  outline: none;
}
.input__label {
  display: inline-block;
  float: right;
  padding: 0 1em;
  width: 40%;
  color: #6a7989;
  font-weight: bold;
  font-size: 70.25%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.input__label-content {
  position: relative;
  display: block;
  padding: 1.6em 0;
  padding-left: 2em;
  width: 100%;
}
.graphic {
  position: absolute;
  top: 0;
  left: 0;
  fill: none;
}
.icon {
  color: #ddd;
  font-size: 150%;
}

.input--kaede {
  display: block;
  overflow: hidden;
  margin: 1em auto 2em;
  background: #efeeee;
}

.input__field--kaede {
  position: absolute;
  top: 0;
  right: 100%;
  width: 60%;
  height: 100%;
  background: #fff;
  color: #9dabba;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__label--kaede {
  z-index: 10;
  display: block;
  width: 100%;
  height: 100%;
  text-align: left;
  cursor: text;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.input__field--kaede:focus,
.input--filled .input__field--kaede {
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition-delay: 0.06s;
  transition-delay: 0.06s;
}

.input__field--kaede:focus + .input__label--kaede,
.input--filled .input__label--kaede {
  -webkit-transform: translate3d(60%, 0, 0);
  transform: translate3d(60%, 0, 0);
  pointer-events: none;
}

@media screen and (max-width: 34em) {
  .input__field--kaede:focus + .input__label--kaede,
  .input--filled .input__label--kaede {
    -webkit-transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
    transform: translate3d(65%, 0, 0) scale3d(0.65, 0.65, 1);
    pointer-events: none;
  }
}
</style>
